<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="../helper.js"></script>
  <link href="data/logger.css" rel="stylesheet" type="text/css">
	<style type="text/css">

  #mouse {
    height: 180px;
    width: 600;
    background-color: orange;
    border: 1px inset;
    padding: 2px;
  }

  #innerMouse1, #innerMouse2 {
    border: 1px solid black;
    margin: 2px;
    padding: 2px;
  }

  #frame {
    border: 1px solid red;
    width: 200px;
    margin-left: 150px;
    padding: 2px;
  }

  #form {
    position: absolute;
    top: 300px;
    left: 700px;
    width: 200px;
  }

	</style>

</head>
<body id="body">

  <h1>qooxood mouse events</h1>
  <p>
    This logger prints the mouse events as they are fired by the qooxdoo
    event layer.
  </p>

	<div id="mouse">
    Click here (mouse)
    <div id="frame">
      (frame)
      <div id="innerMouse1">(innerMouse1)</div>
      <div id="innerMouse2">(innerMouse2)</div>
    </div>
  </div>

  <div id="logger">
	</div>

  <div id="form">
    <input type="button" id="btnClear" value="clear">
    <table>
      <tr>
        <td><input type="checkbox" id="check_mousedown" checked="checked"></td>
        <td><label for="check_mousedown">mousedown</label></td>
      </tr><tr>
        <td><input type="checkbox" id="check_mouseup" checked="checked"></td>
        <td><label for="check_mouseup">mouseup</label></td>
      </tr><tr>
        <td><input type="checkbox" id="check_click" checked="checked"></td>
        <td><label for="check_click">click</label></td>
      </tr><tr>
        <td><input type="checkbox" id="check_dblclick" checked="checked"></td>
        <td><label for="check_dblclick">dblclick</label></td>
      </tr><tr>
        <td><input type="checkbox" id="check_contextmenu" checked="checked"></td>
        <td><label for="check_contextmenu">contextmenu</label></td>
      </tr><tr>
        <td><input type="checkbox" id="check_mousemove"></td>
        <td><label for="check_mousemove">mousemove</label></td>
      </tr><tr>
        <td><input type="checkbox" id="check_mouseover"></td>
        <td><label for="check_mouseover">mouseover</label></td>
      </tr><tr>
        <td><input type="checkbox" id="check_mouseout"></td>
        <td><label for="check_mouseout">mouseout</label></td>
      </tr><tr>
        <td colspan="2"><hr /></td>
      </tr><tr>
        <td><input type="checkbox" id="capture"></td>
        <td><label for="capture">enable event capturing for #mouse</label></td>
      </tr>
    </table>
  </div>  

</body>
</html>
